<template>
  <div class="editor-password">
    <el-form ref="ruleFormRef" :model="editorPasswordForm" :rules="rules" label-width="120px" class="demo-ruleForm">
      <el-form-item label="原始密码" prop="oldPassword">
        <el-input v-model="editorPasswordForm.oldPassword" type="password" autocomplete="off" />
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword">
        <el-input v-model="editorPasswordForm.newPassword" type="password" autocomplete="off" :show-password="true" />
      </el-form-item>
      <el-form-item label="确认密码" prop="confirmPassword">
        <el-input v-model="editorPasswordForm.confirmPassword" type="password" autocomplete="off" :show-password="true" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="savePwdHandler(ruleFormRef)">保存</el-button>
        <el-button @click="closeHandler">关闭</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import type { FormInstance, FormRules } from "element-plus";
import type { ResetPassword } from "@/typings";
import { resetUserPasswordApi } from "@/api";
import { reactive, ref } from "vue";
import { useRoute } from "vue-router";
import { useKeepAliveStore, useTabsStore } from "@/stores";
import { ElMessage } from "element-plus";
import md5 from "md5";
defineOptions({
  name: "EditorPassword"
});
type EditorPasswordType = ResetPassword;

const ruleFormRef = ref<FormInstance>();
const route = useRoute();
const tabStore = useTabsStore();
const keepAliveStore = useKeepAliveStore();
const editorPasswordForm: EditorPasswordType = reactive({
  code: "",
  oldPassword: "",
  newPassword: "",
  confirmPassword: ""
});

/**
 * @description 原始密码校验
 * @param _ 规则
 * @param value 值
 * @param callback 回调
 */
const passwordVerify = (_: any, value: string, callback: (error?: string | Error) => void) => {
  if (value === editorPasswordForm.oldPassword) {
    callback(new Error("新密码不能与原始密码相同"));
  }
  callback();
};

/**
 * @description 确认密码校验
 * @param _ 规则
 * @param value 值
 * @param callback 回调
 */
const confirmPasswordVerify = (_: any, value: string, callback: (error?: string | Error) => void) => {
  if (value !== editorPasswordForm.newPassword) {
    callback(new Error("两次输入密码不一致!"));
  }
  callback();
};

/**
 * @description 表单验证
 */
const rules = reactive<FormRules<typeof editorPasswordForm>>({
  oldPassword: [
    { required: true, message: "请输入原始密码", trigger: "blur" },
    { min: 6, max: 16, message: "长度在 6 ~ 16 个字符", trigger: "blur" }
  ],
  newPassword: [
    { required: true, message: "请输入新密码", trigger: "blur" },
    { min: 6, max: 16, message: "长度在 6 ~ 16 个字符", trigger: "blur" },
    { validator: passwordVerify, trigger: "blur" }
  ],
  confirmPassword: [
    { required: true, message: "请再次输入新密码", trigger: "blur" },
    { validator: confirmPasswordVerify, trigger: "blur" }
  ]
});

/**
 * @description 保存
 */
const savePwdHandler = (ruleFormRef: FormInstance | undefined) => {
  try {
    if (!ruleFormRef) return false;
    ruleFormRef.validate(async (valid: boolean) => {
      if (!valid) {
        ElMessage.error("请填写正确的表单信息进行提交");
        return false;
      }
      // todo 进行md5加密
      const password = {
        oldPassword: md5(editorPasswordForm.oldPassword),
        newPassword: md5(editorPasswordForm.newPassword)
      };
      const res = await resetUserPasswordApi(password);
      if (res.code !== 200) {
        return ElMessage.error(res.message);
      }
      ElMessage.success("修改密码成功");
    });
  } catch (error) {
    console.error("修改密码失败");
  }
};

/**
 * @description 关闭
 */
const closeHandler = () => {
  const fullPath = route.fullPath;
  const name = tabStore.tabsMenuList.filter((item) => item.path == fullPath)[0].name || "";
  keepAliveStore.removeKeepAliveName(name);
  tabStore.closeTab(fullPath as string, true);
};
</script>

<style scoped lang=""></style>
